<script setup>
import {onMounted, reactive, ref} from "vue";
import router from "@/router/index.js";
import {Search} from "@element-plus/icons-vue/global";
import {ElMessage} from "element-plus";
import {xxgwSearch} from "@/api/informationApi/xxgwApi.js";

const activeIndex = ref('3')
const handleMenuSelect = (key, keyPath) => {
  router.push(keyPath.toString())
}


const form = reactive({
  title: '',
})

const date = ref('')
const department = ref('')
const options = [
  {
    value: '学生工作部（处）',
    label: '学生工作部（处）',
  },
  {
    value: '学校办公室',
    label: '学校办公室',
  },
  {
    value: '后勤保障部',
    label: '后勤保障部',
  },
  {
    value: '纪委办公室',
    label: '纪委办公室',
  },
  {
    value: '本科生院',
    label: '本科生院',
  },
  {
    value: '研究生院',
    label: '研究生院',
  },
  {
    value: '校党委',
    label: '校党委',
  },
  {
    value: '保卫处',
    label: '保卫处',
  },
  {
    value: '校工会',
    label: '校工会',
  },
  {
    value: '校团委',
    label: '校团委',
  },
  {
    value: '人事部',
    label: '人事部',
  },
  {
    value: '国际合作交流处',
    label: '国际合作交流处',
  },
  {
    value: '财务部',
    label: '财务部',
  },
  {
    value: '招生办',
    label: '招生办',
  },
  {
    value: '教材部',
    label: '教材部',
  },
  {
    value: '科学研究中心',
    label: '科学研究中心',
  },
]
const search = () => {
  const searchParams = {
    title: form.title,
    department: department.value,
    date1: date.value[0],
    date2: date.value[1],
    limit: 10,
    page: currentPage.value,
  };

  xxgwSearch(searchParams).then(res => {
    if(res.status === 200){
      //查询成功
      tableData.value = res.data.notificationsIdVos;
      total.value = res.data.count;
    }
  }).catch(() => {
    ElMessage.error("查询失败");
  })
}
const clear = () => {
  form.title = '';
  department.value = '';
  date.value = '';
  search();
}
const tableData = ref([]);
const total = ref(100);
let currentPage=ref(1);

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
}

onMounted(() => {
  search();
})
</script>

<template>
  <div class="information">
    <el-container>
      <el-header class="information-header">
        <el-menu class="information-header-content" :default-active="activeIndex" @select="handleMenuSelect">
          <el-menu-item index="/information/xxlh">学校例会</el-menu-item>
          <el-menu-item index="/information/xntz">校内通知</el-menu-item>
          <el-menu-item index="/information/xxgw" class="selected">学校公文</el-menu-item>
          <el-menu-item index="/information/xxxx">学校信息</el-menu-item>
        </el-menu>
      </el-header>
    </el-container>
  </div>
  <div class="content">
    <el-row :gutter="40">
      <el-col :span="7">
        <div class="content-left">
          <div class="left-title">
            <el-icon size="large" class="icon"><Search /></el-icon>
            <p class="text">文件搜索</p>
          </div>
          <div class="left-content">
            <el-form :model="form">
              <el-form-item label="标题关键字">
                <el-input v-model="form.title" />
              </el-form-item>
              <el-form-item label="发布部门">
                <el-select v-model="department" placeholder="选择部门">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="时间区间">
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    range-separator="——"
                    start-placeholder="起始时间"
                    end-placeholder="截止时间"
                    value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <div class="button">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="clear">重置</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="17">
        <div class="content-right">
          <div class="right-header">
            <el-divider content-position="left"><el-text style="font-size: large; color: rgb(51,133,217);">学校公文</el-text></el-divider>
          </div>
          <div class="right-content">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="suiId" label="序号" align="center" width="70" />
              <el-table-column label="标题" align="center" >
                <template #default="{ row }">
                  <a :href=" row.content " class="link">{{ row.title }}</a>
                </template>
              </el-table-column>
              <el-table-column prop="issuingDepartment" label="发布部门" align="center" width="160" />
              <el-table-column prop="yingDate" label="日期" align="center" width="140" />
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
            </el-table>
          </div>
          <div class="right-bottom">
            <el-pagination
                v-model:current-page="currentPage"
                page-size="10"
                :background="true"
                layout="total, prev, pager, next"
                :total="total"
                style="margin-top: 30px; justify-content: center"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.information-header{
  margin-top: 50px;
  padding: 0;
}
.information-header-content{
  background-color: rgb(16,88,170);
  display: flex;
  justify-content: center;
}
.el-menu-item{
  flex: 1;
  justify-content: center;
  color: white;
  font-weight: bolder;
  letter-spacing: 5px;
  font-size: 16px;
}
.el-menu-item:hover {
  background-color: #f0f0f0;
  color: #333;
}
.el-menu-item.is-active {
  background-color: rgb(51,133,217);
  color: #fff;
}
.selected{
  background-color: rgb(51,133,217);
  color: #fff;
}

.content{
  margin-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.content-left{
  background-color: #f0f0f0;
  border-radius: 10px;
}
.left-title{
  display: flex;
  letter-spacing: 2px;
  background-color: rgb(16,88,170);
  justify-content: center;
  align-items: center;
  height: 50px;
  border-radius: 10px 10px 0 0;
}
.left-content{
  padding: 20px;
}
.icon{
  margin-right: 5px;
  color: white;
}
.text{
  color: white;
}
.button{
  display: flex;
  justify-content: center;
  gap: 50px;
}
.right-content{
  margin-top: 30px;
}
.link{
  color: black;
  text-decoration: none;
}
.link:hover{
  color: #007bff;
}
</style>
